// ast语法树 {} vnode {}

/**
 * {
 *  tag: 'div',
 *  attrs: [{id: "app"}],
 *  children: [{tag: null, text: hello}]
 * }
 */

const ncname = `[a-zA-Z_][\\-\\.0-9_a-zA-Z]*`;  // 标签名称

const qnameCapture = `((?:${ncname}\\:)?${ncname})`; // <span:xx>
const startTagOpen = new RegExp(`^<${qnameCapture}`); // 标签开头的正则 捕获的内容是标签名
const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`); // 匹配标签结尾的 </div>
const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/; 
const startTagClose = /^\s*(\/?)>/; // 匹配标签结束
const defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/g; // {{}}

function parseHTML(html) {
    // <div id="app">hello {{ msg }}</div> // 开始标签 文本 结束标签
    while(html) { // html为空结束
        // 判断标签 <>
        let textEnd = html.indexOf('<') // 0
        if(textEnd === 0) { // 标签
            // (1) 开始标签
            const startTagMatch = parseStartTag() // 开始标签的内容
        }
        break
    }
    function parseStartTag() {
        const start = html.match(startTagOpen) // 1.结果 2false
        // 创建ast语法树
        let match = {
            tagName: start[1],
            attrs: []
        }
        // 删除 开始标签
        advance(start[0].length)
        // 属性
        // 注意 多个属性 遍历
        // 注意 >
        let attr
        let end
        while(!(end = html.match(startTagClose)) && (attr = html.match(attribute))) {
            console.log(attr)
            match.attrs.push({
                name: attr[1],
                value: attr[3] || attr[4] || attr[5]
            })
            advance(attr[0].length)
            break
        }
        if(end) {
            console.log('1111111')
            console.log(end)
            advance(end[0].length)
            return match
        }
    }
    function advance(n) {
       html = html.substring(n)
       console.log(html)
    }
}

export function compileToFunction(el) {
    let ast = parseHTML(el)
}